<template>
  <div class="type-list">
    <div @click="changeType(item.id)" v-for="item in typeList" :key="item.id" class="type-item" :class="item.id === programTypeId ? 'active' : ''">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  typeList: {
    type: Array,
    required: true
  },
  programTypeId: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['changeType'])

const changeType = (id) => {
  emit('changeType', id)
}


</script>

<style lang="less" scoped>
.type-list {
  margin-top: 40px; 
  margin-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  // justify-content: space-between;
  .type-item {
    padding: 10px 16px;
    border: 1px solid #303046;
    border-radius: 32px;
    color: #88888C;
    cursor: pointer;
    img {
      width: 24px;
      height: 24px;
      margin-right: 8px;
    }
  }
  .active {
    color: #961616;
    border-color: #961616;
  }
}
</style>